import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Switch } from 'antd';
import { FormGroup, DATA_ENTRY, TableC } from '../../comps';
import { FormItemLayout } from '../../comps/form/formPub';
import moment from 'moment';
const formItemLayoutDefine = {
  labelCol: {
    lg: { span: 8, offset: 0 },
    xl: { span: 8, offset: 0 },
    xxl: { span: 8, offset: 0 },
  },
  wrapperCol: {
    lg: { span: 16, offset: 0 },
    xl: { span: 16, offset: 0 },
    xxl: { span: 16, offset: 0 },
  },
};
@Form.create()
class LayerContent extends React.Component {
  constructor() {
    super();
    this.state = {
      managerInfos: [],
      switchValue: false,
    };
  }
  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
  }
  //获取页面中勾选的值以及表单中的年份以及季度的下拉
  getFormContent = (callback) => {
    const { managerInfos } = this.state;
    if (managerInfos && managerInfos.length > 0) {
      let values = this.formContent.getFormGroupData();
      values.reportDate = moment(values?.reportDate).format('YYYY-MM-DD HH:mm:ss');
      managerInfos.map((item) => {
        item.reportDate = values.reportDate;
        item.needPenetrate = this.state.switchValue;
      });
      callback({
        managerInfosForReport: managerInfos,
      });
    }
  };
  //清空勾选的值,并且清空下拉的值
  clearSelectArr = () => {
    this.setState(
      {
        managerInfos: [],
      },
      () => {
        this.formContent.props.form.resetFields();
      },
    );
  };

  switchChange = (e) => {
    this.setState({
      switchValue: e,
    });
  };

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const dataSourceFrom = [
      {
        dataIndex: 'reportDate',
        title: '日期',
        span: 24,
        type: DATA_ENTRY.SINGLEDATE,
        rules: [{ required: true, message: '请选择日期!' }],
        disableBegin: moment('2021-12-31'),
        formItemLayout: FormItemLayout,
      },
      {
        dataIndex: 'tenant',
        type: DATA_ENTRY.TENANT,
        title: '租户',
        multiple: true,
        positionBody: true,
        span: 24,
        formItemLayout: FormItemLayout,
        rules: [{ required: true, message: '请选择租户!' }],
        onChange: (e) => {
          if (e) {
            let managerInfos = [];
            e &&
              e.info.map((item) => {
                managerInfos.push({
                  scene: item.reportScenario,
                  stressTestTemplate: item.reportTemplate,
                  managerName: item.title,
                });
              });
            this.setState({
              managerInfos: managerInfos,
            });
          } else {
            this.setState({
              managerInfos: [],
            });
          }
        },
      },
    ];
    return (
      <div>
        <FormGroup dataSource={dataSourceFrom} autoLayout={false} onRef={(ref) => (this.formContent = ref)}></FormGroup>
        <Form.Item label='是否穿透' className={'switch'} {...formItemLayoutDefine}>
          {getFieldDecorator('needPenetrate', {
            rules: [{ required: true, message: '请选择是否穿透' }],
          })(<Switch onChange={this.switchChange} style={{ marginRight: '10px' }} />)}
        </Form.Item>
      </div>
    );
  }
}
export default connect(({ tenantM, loading }) => ({ tenantM, loading: loading.effects['tenantM/getTenantList'] }))(LayerContent);
